<link href="/magiczoomplus/magiczoomplus.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="/magiczoomplus/magiczoomplus.js" type="text/javascript"></script>

<link href="/cf/css/rating.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="/cf/js/rating.js" type="text/javascript"></script>


<div class="product-container">
	<h1>{$product->fullName()}</h1>
	<div class="img-container">
		{if $product->image()}
			<a href="/{$product->image()}" class="MagicZoomPlus" id="Zoomer">
				<img src="{thumbnail width=255 height=180}{$product->image()}{/thumbnail}" alt="{$product->fullName()|escape}" title="{$product->imageText()|escape|default:$product->fullName()}" />
			</a>
		{/if}
	</div>
	<div class="text-container">
		<div class="options-holder">
			<dl class="marking">
				<dt>Артикул:</dt>
				<dd>{$product->article()}</dd>
			</dl>
			<dl>
				<dt>Цена:</dt>
				<dd><span><strong>{$product->price('integral')}</strong>.{$product->price('fractional')}</span><em>руб</em>с учетом НДС</dd>
			</dl>
		</div>
		<div class="delivery-box">
			<a href="/delivery">Условия доставки</a>
		</div>
		<form class="buy-form">
			<fieldset>
				<input type=hidden name='id' value='{$product->id()}' />
				<input type=text name='amount' class="text" value="1" />
				<input type="submit" class="submit" value="КУПИТЬ" />
			</fieldset>
		</form>
		<div class="star-box">
			{if $product->rating()}
			<dl>
				<dt>Оценка:</dt>
				<dd>{$product->rating()} из 5</dd>
			</dl>
			<ul class="star-rating">
				{for $star=1 to $product->rating()|intval}
					<li><img src="/images/star3.gif" width="24" height="23" /></li>
				{/for}
				{if $product->rating()|intval < 5}
				<li>
					{$decimal = ($product->rating() - $product->rating()|floor) * 10 }
					{if $decimal == 0}
						<img src="/images/star4.gif" width="24" height="23" />
					{elseif $decimal < 5}
						<img src="/images/star3_25.gif" width="24" height="23" />
					{elseif $decimal == 5}
						<img src="/images/star3_50.gif" width="24" height="23" />
					{elseif $decimal > 5}
						<img src="/images/star3_75.gif" width="24" height="23" />
					{/if}
				</li>
				{/if}
				{for $star=$product->rating()|intval+2 to 5}
					<li>a<img src="/images/star4.gif" width="24" height="23" /></li>
				{/for}
			</ul>
							
			{/if}
			<div id='rate'>
				<a href="#">Поставить оценку</a>
				<div id='rateBox' style="display:none;"></div>
			</div>
		</div>

	</div>
	<ul class="img-list">
	{foreach $product->images() as $img}
		<li>
			<a href='/{$img}' rel="zoom-id:Zoomer" rev="{thumbnail width=255 height=180}{$img}{/thumbnail}">
				<img src="{thumbnail width=70 height=70}{$img}{/thumbnail}" alt='{$product->fullName()|escape}' title='{$imageTexts[$img@index]|escape|default:$product->fullName()}' />
			</a>
		</li>
	{/foreach}
	</ul>
	<br>
	<br>
	{$product->fullDescr()}
</div>

{if $relatedProducts}
<div class="title">
	<h2>Сопутствующие товары</h2>
</div>
<div class="products-holder">
	<ul class="products">
	{foreach $relatedProducts as $related}
		<li>
			{include 'components/product.tpl' product=$related}
		</li>
	{/foreach}
	</ul>
</div>
{/if}


{if $video}
<div class='round-corners' style='text-align:center; background-color: #f1f1f1; padding:20px;'>
	{$video}
</div>
{/if}



<script>
	$(function() {
		function showUserRating(rating) {
			$('#rate').html("Ваша оценка: <strong>"+rating+'</strong>');
		}
	
		$.get('/cf/call/cookie.get',{ 'name':'ratings' }, function(ratings) { 
			var rated = false;
			if (typeof(ratings) == 'object') {
				if ('{$product->id()}' in ratings) {
					rated = true;
					showUserRating(ratings['{$product->id()}']);
				}
			}
			else {
				ratings = { };
			}
			if (!rated) {
				$('#rate a').on('click',function(e) {
					e.preventDefault();
					$('#rateBox').toggle();
				} );

				$('#rateBox').rateBox({ 
					'rating': 5, 
					'onRate': function(rating) { 
						ratings['{$product->id()}'] = rating;
						$.when(
							$.get('/cf/call/shop.addReview',{ 'productId':{$product->id()}, 'rating':rating }),
							//$.get('/cf/call/cookie.set',{ 'name':'ratings', 'expireMin':'never', 'params':{ '{$product->id()}':rating } })
							$.get('/cf/call/cookie.set',{ 'name':'ratings', 'expireMin':'never', 'params':ratings })
						).done(
							function() { 
								$('#rateBox').hide();
								showUserRating(rating);
							}
						);
					} 
				});
			}
		} );
	} );
</script>